<template>
<div class="todoapp">
    <todoHeardr @addTask="addTaskHandler"></todoHeardr>
    <todoMain @delTask="delTaskHandler" :list="showlist"></todoMain>
    <todoFooter @changeTask="changeTaskHandler" :list="showlist"></todoFooter>
  </div>
</template>

<script>
import todoFooter from './components/todoFooter'
import todoHeardr from './components/todoHeardr'
import todoMain from './components/todoMain'
export default {

  components:{
    todoFooter,
    todoHeardr,
    todoMain
  },
  data() {
    return {
         list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      isSel: "all"
    };
  },
  methods: {
    addTaskHandler(taskname){
      this.list.push({
        id:this.list[this.list.length-1].id+1,
        name:taskname,
        isDone:false
      })
    },
    delTaskHandler(id){
      const index =this.list.findIndex(item=>item.id===id)
      this.list.splice(index,1)
    },
     changeTaskHandler(isSel){
        this.isSel =isSel
     }
  },
   computed: {
    showlist() {
      if (this.isSel === 'yes') {
        let newArr = []
        this.list.forEach(item => {
            if (item.isDone) {
                newArr.push(item)
          }
        })
        return newArr
      } else if (this.isSel === 'no') {
             let newArr = []
        this.list.forEach(item => {
          if (!item.isDone) {
            newArr.push(item)
          }
        })
        return newArr
      } else {
        return this.list
      }
    }
  }
}      
</script>

<style lang="scss" scoped>

</style>